import { Meta, Source } from '@storybook/blocks';

<Meta title="HOOKS/useIconByEntity" />

# useIconByEntity()
###### `useIconByEntity(entity: string, iconProps?: Omit<IconProps, 'icon'>)`
This hook will retrieve an icon from the entity in home assistant, home assistant seems to share the icons from the [@iconify/react](https://iconify.design/docs/icon-components/react/) package, so we're able to re-use the icons predefined in home assistant.

To find an available icon name, simply search for an icon on [iconify](https://icon-sets.iconify.design/) and then provide the name to the hook.

### Example Usage

<Source dark code={`
import { useIconByEntity } from '@hakit/core';
function IconExample() {
  const icon = useIconByEntity('light.fake_light_1');
  return <div>{icon}</div>
}
`}/>

## Custom Props

If you want to provide props that the Icon component that [@iconify/react](https://iconify.design/docs/icon-components/react/) supports, pass it as the second parameter.
This example will change the color to red and the size to 40px.
<Source dark code={`
import { useIconByEntity } from '@hakit/core';
function IconExample() {
  const icon = useIconByEntity('light.fake_light_1', {
    color: 'red',
    style: {
      fontSize: 40
    }
  });
  return <div>{icon}</div>
}
`}/>
